<template>
  <div class="role-settion">
    <div class="" style="height:70px;" v-show="canShow"></div>
    <div class="authority-title" :class="{fullScreen:!canShow}">
      <h2>角色权限设置</h2>
      <div class="btn-grounp">
        <span class="dap-button" @click="saveRoleBtn">保存</span>
        <span class="dap-close-button" @click="goBack">返回</span>
        <svg class="all-close-btn icon-svg" v-show="!fullScreen" @click="closeAll" viewBox="0 0 612 792">
          <path :d="svgPath.closeFullScreen"/>
        </svg>
      </div>

    </div>
    <div class="role-settion-wrapper">
      <div class="role-item role-list-search">
        <p class="role-head"><img src="../../assets/img/nzjuese.png" alt="">内置角色</p>
        <ul class="role-type">
          <li v-for="item in nzJuese">
            <el-tooltip v-if="item.roleName.length>7" class="item" effect="dark" :content="item.roleName"
                        placement="top">
              <check-box :checkDataItem="item" :checked="item.selected" @checkListener="checkListener"></check-box>
            </el-tooltip>
            <check-box v-else :checkDataItem="item" :checked="item.selected" @checkListener="checkListener"></check-box>
          </li>
        </ul>
      </div>
      <div class="role-item role-list-search" v-if="ywJuese">
        <p class="role-head"><img src="../../assets/img/yewujuese.png" alt="">业务角色</p>
        <ul class="role-type">
          <li v-for="item in ywJuese">
            <el-tooltip v-if="item.roleName.length>7" class="item" effect="dark" :content="item.roleName"
                        placement="top">
              <check-box :checkDataItem="item" :checked="item.selected" @checkListener="checkListener"></check-box>
            </el-tooltip>
            <check-box v-else :checkDataItem="item" :checked="item.selected" @checkListener="checkListener"></check-box>
          </li>
        </ul>
      </div>
    </div>
    <!-- 用户清空自己权限弹窗 -->
    <dap-popover ref="refEmptRole" @clickLeft='requireBtn' @clickRight='closeBtn'>
      <p class="popover-text">您确定清空角色吗？</p>
    </dap-popover>
  </div>
</template>
<script>
  import { svgPath, quitFullScreen } from "../../assets/js/utils";
  // 复选框checkbox
  import checkBox from "../last/filter/check-box/check-box.vue";
  // 获取角色，保存角色,注销
  import { getUserRole, saveUserRole, logout, filterLogText } from "../../api/authority.js";
  // 弹出窗
  import dapPopover from "../view/dap-popover.vue";

  export default {
    props: ["isChange", "fullScreen"],
    components: {
      checkBox,
      dapPopover
    },
    data() {
      return {
        userInfo: "",        // 取session中用户信息
        userId: "",
        roleIds: "",          // 用户选中的所有角色id
        canShow: true,
        svgPath: svgPath,
        nzJuese: [],   // 内置角色
        ywJuese: [],   // 业务角色
        noSubmit: true  // 防止重复点击
      };
    },
    watch: {
      isChange() {
        if (document.querySelector(".el-header")) {
          this.canShow = true;
        } else {
          this.canShow = false;
        }
      }
    },
    mounted() {
      this.userInfo = window.sessionStorage.getItem("sessionUser");
      if (this.userInfo) {
        this.userInfo = JSON.parse(this.userInfo);
      }
      this.userId = this.$route.query.userId;
      // 获取所有角色
      this.getUserRole();
    },
    methods: {
      // 获取所有角色
      getUserRole() {
        getUserRole(this.userId).then((res) => {
          if (res.code === 0) {
            res.data.forEach((item) => {
              if (item.roleTypeId === 0) {
                this.nzJuese = item.roles;
              } else if (item.roleTypeId === 1) {
                this.ywJuese = item.roles;
              }
            });
            // 为了和checkbox字段一致和控制7个字
            this.nzJuese.forEach((item) => {
              item.selectName = filterLogText(item.roleName);
              item.checked = item.selected;
            });
            this.ywJuese.forEach((item) => {
              item.selectName = filterLogText(item.roleName);
              item.checked = item.selected;
            });
          }
        });
      },
      // 点击checkbox切换选中
      checkListener(self) {
        self.checkDataItem.selected = self.checkDataItem.checked;
      },
      // 保存按钮
      saveRoleBtn() {
        console.log(this.noSubmit)
        let that = this;
        if (!this.noSubmit) {
          return;
        }
        this.noSubmit = false;
        this.getRoles();
        if (this.roleIds) {
          this.saveUserRole();
        } else {
          // 判断是否用户自己
          if (this.userId == this.userInfo.userId) {
            this.$refs.refEmptRole.show();
          } else {
            that.saveUserRole('','您未选择角色名称');
          }
        }
      },
      // 保存修改
      saveUserRole(callback = "",text='设置成功！') {
        saveUserRole(this.userId, this.roleIds).then((res) => {
          let that = this;
          this.noSubmit=true;
          if (res.code === 0) {
            if(!callback){
              this.$message({
                message:text,
                center: true,
                type: "success"
              });
            }

            if (callback) {
              callback();
            } else {
              that.goBack();
            }
          }else{
            this.$message({
              message:res.message,
              center: true,
              type: "info"
            });
          }
        });
      },

      // 清空权限弹窗确定按钮,清空该用户角色权限，跳转登录页，点击取消关闭弹窗
      requireBtn() {
        this.$refs.refEmptRole.hide();
        this.saveUserRole(function() {
          logout().then((res) => {
            console.log(res);
          });
          window.sessionStorage.clear();
          location.href = "#/";
        });
      },

      // 获取选中的角色id
      getRoles() {
        let roleIds = "";
        this.nzJuese.forEach((item) => {
          if (item.selected) {
            roleIds += item.roleId + ",";
          }
        });
        this.ywJuese.forEach((item) => {
          if (item.selected) {
            roleIds += item.roleId + ",";
          }
        });
        this.roleIds = roleIds.slice(0, roleIds.length - 1);
      },
      // 弹窗取消
      closeBtn(){
        this.noSubmit=true;
      },
      // 返回
      goBack() {
        this.$router.replace({ path: "/authority/user-list", query: { roleSet: 1 } });
      },
      // 关闭全屏
      closeAll() {
        quitFullScreen();
      }
    }
  };
</script>
<style scoped>
  .role-settion {
    color: #fff;
    font-size: 12px;
  }

  .role-settion .authority-title {
    display:flex;
    justify-content: space-between;
  }

  .authority-title.fullScreen {
    top: 0;
  }
  .btn-grounp{
    padding-right: 30px;
  }
  .btn-grounp .all-close-btn{
    margin-right: 0;
  }
  .role-settion-wrapper {
    padding: 30px;
  }

  .role-item {
    color: #9b9aad;
    margin-bottom: 40px;
  }

  .role-head {
    padding: 0 18px;
    height:60px;
    display: flex;
    align-items: center;
  }
  .role-head>img{
    margin-right:10px;
  }
  .role-type {
    padding: 0 18px;
    padding-bottom: 20px;
    border-top: 1px solid #283f59;
    display: flex;
    flex-wrap: wrap;
  }

  .role-type > li {
    margin-top: 30px;
    margin-right: 30px;
    width:120px;
  }

  .check-box-wrapper {
    height: auto;
    line-height: 0;
  }


  .dap-close-button {
    margin:0 22px;
  }

  /* 弹窗 */
  .popover-text {
    text-align: center;
    padding-top: 32px;
    font-weight: normal;
  }
</style>

<style>
  .role-settion .right-text {
    height: auto;
    line-height: 0;
  }
</style>
